<template>
    <nav class="banxin tanxin">
        <div class="img">
            <img src="../assets/images/indexLogo.png" alt="">
        </div>
        <ul class="tanxin">
            <li 
            v-for="(item,index) in lis" 
            :key="item" 
            :class="{chose : $route.path === urls[index]}"
            @click="changeChose(index)"
            >{{item}}</li>
            <!-- <li :class="{chose : isChose[1]}">全部商品</li>
            <li :class="{chose : isChose[2]}">个人中心</li>
            <li :class="{chose : isChose[3]}">我的订单</li>
            <li :class="{chose : isChose[4]}">专属福利</li> -->
        </ul>
        <div class="tanxin btn">
            <input type="text"
            placeholder="输入你想搜索的内容[默认全部]"
            v-model="seachVal"
            @keyup.enter="serchFn"
            >
            <div class="serch" @click="serchFn">
                <img src="../assets/images/search.png" alt="">
            </div>
        </div>
    </nav>
</template>

<script>
// import bus from "@/common/bus";
export default {
    data () {
        return {
            // 搜索栏input框
            seachVal:'',
            lis :[ '首页','全部商品','个人中心','全部订单','专属福利' ],
            urls : [ '/home' , '/goods' ,'/user','/order','/free'] //配置跳转的地址
        }
    },
    methods:{
        changeChose(index){
            // 改变当前的文字显示颜色
            this.$store.commit('changeIsChose',index)
            // 跳转链接 至 第二个界面
            this.$router.push(this.urls[index])
        },
        // 点击了搜索之后 
        // 1 跳转至更多 /goods界面
        // 2 将其中的商品重新渲染
            // 2.1 将val 当作key传递给 goodtitle中 传路由
        serchFn(){
            this.$router.push(`/goods?keyword=${this.seachVal}`)
            // bus.$emit('giveKeyFromNav' , this.seachVal)
        }
    }
}
</script>
 
<style lang = "less" scoped>
    @import '../assets/base.less';
    nav {
        align-items: center;
        .img {
            padding: 20px 0;
        }
        ul {
            align-items: center;
            width: 500px;
            justify-content: space-around;
            li{
                cursor: pointer;
                &.chose {
                    font-weight: bold;
                    color: @blue;
                }
            } 
            
        }
        .btn {
            display: flex;
            input {
                width: 214px;
                height: 40px;
                outline: none;
                border-radius: 20px 0 0 20px;
                border: 1px solid #DEDEDE;
                text-indent: 1em;
                box-sizing: border-box;
            }
            .serch {
                cursor: pointer;
                width: 50px;
                height: 40px;
                box-sizing: border-box;
                border-radius: 0px 20px 20px 0px;
                background-color: @blue;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>